<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/global-style.css" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    	body{
    		background-color: #F5F4F2!important;
    		color: #575A60!important;
    	}
    	.title_cover{
    		background-color: #778591;
    		width: 100%;
    		height: 180px;
    		text-align: center;
    		color: white;
			text-shadow: #444 0 1px 1px;
			font-size: 36px;
			padding-top: 55px;
			z-index:2;
    	}
    	.form-group{ position: relative; }
    	.well{ background-color:#fff!important; }
    	.form_message{ margin-top:7px;color:#D42027; }
    	.has-error label { color:#D42027; }
    	.form-control-feedback{ position:absolute;top:32px;right:10px;display:none; }
    	.has-success .form-control-feedback{display:block;}
    	.file_upload_btn {position:relative;overflow:hidden;}
    	#business-logo{ position: absolute; top: 0;right: 0;margin: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';direction: ltr;cursor: pointer;font-size: 200px;}
    	.slide_up{
    		-webkit-transform: translateY(-120%);
			-o-transform: translateY(-120%);
			-moz-transform: translateY(-120%);
		    transform: translateY(-120%);
		    z-index:1;
    	}
    	.slide{
    		-webkit-transition:all 1s;
			-o-transition:all 1s;
			-moz-transition:all 1s;
			transition:all 1s;
    	}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->
<div class="title_cover">
Faeple 비즈니스 계정 만들기
</div>
<div class="container" style="margin-bottom:50px;overflow:hidden;position:relative;">
	<form method="post" id="business-form">
	<div class="col-md-8 col-md-offset-2">
		<div class="well slide" style="border-top-left-radius:0;border-top-right-radius:0;border-top:0;" id="sign-form-wrapper">
			<h4>비즈니스 정보</h4>
			<hr>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-email"><spring:message code="sign.email"/></label>
				<input data-original="${userDto.email}" type="text" class="form-control" id="business-email" name="business-email" title="<spring:message code="sign.email"/>" placeholder="<spring:message code="sign.email_ph"/>"  maxlength="45" tabindex="1" onblur="checkEmail(this.value);" value="${userDto.email}">
				<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
				<div id="business-email-message" class="form_message"></div>
			</div>
			<div class="form-group">
		 		<label for="business-name">사업체 이름</label>
				<input type="text" class="form-control" id="business-name" name="business-name" title="사업체 이름" placeholder="사업체 이름" onblur="checkValidate(this.id);" maxlength="30" tabindex="6" value="${userDto.name}">
				<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
				<div id="business-name-message" class="form_message"></div>
			</div>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-category">사업체 유형</label>
				<select class="form-control" tabindex="7" id="business-category" name="business-category">
					<option value="none">사업체 유형 선택</option>
					<option value="w_cloth_s">여성 의류쇼핑몰</option>
					<option value="w_acc_s">여성 패션잡화쇼핑몰</option>
					<option value="w_all_s">여성 패션종합쇼핑몰</option>
					<option value="w_cloth_m">여성 의류마켓</option>
					<option value="w_acc_m">여성 패션잡화마켓</option>
					<option value="w_all_m">여성 패션종합마켓</option>
					<option value="w_beauty">여성 뷰티몰</option>
					<option value="m_cloth_s">남성 의류쇼핑몰</option>
					<option value="m_acc_s">남성 패션잡화쇼핑몰</option>
					<option value="m_all_s">남성 패션종합쇼핑몰</option>
					<option value="m_cloth_m">남성 의류마켓</option>
					<option value="m_acc_m">남성 패션잡화마켓</option>
					<option value="m_all_m">남성 패션종합마켓</option>
					<option value="m_beauty">남성 뷰티몰</option>
				</select>
				<div id="business-category-message" class="form_message"></div>
			</div>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-description">소개</label>
				<textarea rows="3" class="form-control" id="business-description" name="business-description" maxlength="120" style="resize:vertical;" placeholder="사업체에 대한 설명을 적어주세요" tabindex="8">${userDto.description}</textarea>
			</div>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-website">웹사이트</label>
				<input type="text" class="form-control" id="business-website" name="business-website" title="웹사이트 주소" placeholder="웹사이트 주소를 입력해 주세요"  maxlength="80" tabindex="9" onblur="checkValidate(this.id);" value="${userDto.website}">
				<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
				<div id="business-website-message" class="form_message"></div>
			</div>
			<button class="btn btn-primary btn-block btn-lg" type="button" style="margin-top:30px; border-radius:2px; box-shadow: 0 2px 0 0 #1783D3;border:0;" tabindex="11" onclick="signup(this)">계정 만들기</button>
			<div style="margin:10px 0;font-size:13px;">계정 만들기 버튼을 누름으로써 Faeple의 <a href="/terms" target="blank"><strong>서비스 약관</strong></a> 및 <a href="/privacy" target="blank"><strong>개인정보 보호 정책</strong></a>에 동의하는 것으로 간주됩니다.</div>
		</div>
	</div>
	</form>
	<div class="clearfix"></div>
	<div style="width:100%;text-align:center;display:none;margin-top:60px;" id="complete-message">
		<i class="ion-checkmark-circled" style="font-size:50px; color: #7a7a7a;"></i>
		<h4 style='font-weight: bold; color:#777; text-shadow:0 1px 1px rgba(255,255,255,.8);'>계정이 생성되었습니다</h4>
		<h5 style="margin-top:25px;color:#999; text-shadow:0 1px 1px rgba(255,255,255,.8);font-weight:bold;">비즈니스 기능을 살펴보려면 비즈니스 메뉴를 선택해 보세요</h5>
		<a href="/dashboard" class="btn btn-success" style="margin-top:20px;">바로가기</a>
	</div>
</div>
<div class="container">
	
</div>
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script type="text/javascript">
	var check1 = true;
	var check2 = false;
	var check3 = false;
	var check4 = false;

	function signup(btn){
		if($("#business-email").val() == ""){
			$("#business-email").parent().addClass("has-error");
			$("#business-email-message").html("이메일을 입력해 주세요");
			check1 = false;
		}
		if($("#business-name").val() == ""){
			$("#business-name").parent().addClass("has-error");
			$("#business-name-message").html("사업체 이름을 입력해 주세요");
			check2 = false;
		}
		if($("#business-category").val() == "none"){
			$("#business-category").parent().addClass("has-error");
			$("#business-category-message").html("사업체 유형을 선택해 주세요");
			check3 = false;
		}else{
			$("#business-category").parent().removeClass("has-error");
			$("#business-category-message").empty();
			check3 = true;
		}
		if($("#business-website").val() == ""){
			$("#business-website").parent().addClass("has-error");
			$("#business-website-message").html("웹사이트 주소를 입력해 주세요");
			check4 = false;
		}else{
			check4 = true;
			$("#business-website-message").empty();
		}
		
		if(check1&&check2&&check3&&check4){
			$(btn).attr("disabled","disabled").html("가입중...");
			$.ajax({
			    type : "post"
			    , url : "/businessAccountChange"
			    , data : $("#business-form").serialize()
			    , dataType : "text"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	
			    }
			    , success : function(response) {
			    	if(response == "execute"){
			    		$("#sign-form-wrapper").addClass("slide_up");
			    		setTimeout(function(){
			    			$("#sign-form-wrapper").hide();
			    			$("#complete-message").fadeIn();
			    		},1000);
			    	}else{
			    		
			    	}
			    }
			    , beforeSend: function() {
			    	
			    }
			    , complete: function(){
			    	$(btn).removeAttr("disabled").html("계정 만들기");
			    }
			});
		}
	}
	
	function checkEmail(value){
		if(value != "" && value != $("#business-email").data("original")){
			eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
			if(eCheck.test($("#business-email").val())){
				var data = "email="+$("#business-email").val();
				$.ajax({
				    type : "get"
				    , url : "/checkEmail"
				    , data : data
				    , dataType : "text"
				    , timeout : 5000
				    , error : function(request, status, error) {
				    	
				    }
				    , success : function(response) {
				    	if(response == "true"){
				    		$("#business-email").parent().removeClass("has-error").addClass("has-success");
				    		$("#business-email-message").empty();
				    		check1 = true;
				    	}else{
				    		$("#business-email").parent().addClass("has-error");
							$("#business-email-message").html("이미 존재하는 이메일 입니다");
							check1 = false;
				    	}
				    }
				    , beforeSend: function() {
				    	$("#business-email-message").html("<img src='/resources/img/ajax-loader3.gif'>");
				    }
				});
			}else{
				$("#business-email").parent().addClass("has-error");
				$("#business-email-message").html("<spring:message code='sign.email_err3' javaScriptEscape='true'/>");
				check1 = false;
			}
		}
	}
	
	function checkValidate(id){
		if(id =="business-name"){
			if($("#"+id).val() != ""){
				$("#business-name").parent().removeClass("has-error").addClass("has-success");
	    		$("#business-name-message").empty();
	    		check2 = true;
			}
		}else if(id =="business-website"){
			if($("#"+id).val() != ""){
				$("#business-website").parent().removeClass("has-error").addClass("has-success");
	    		$("#business-website-message").empty();
	    		check4 = true;
			}
		}
	}

	$("body").tooltip({
	    selector: '[data-toggle="tooltip"]',
	    'placement': 'top',
	    'container': 'body',
	    'trigger': "hover"
	});

	$(function(){
		if("${userDto.group_type}" == "seller"){
			alert("이미 비즈니스 계정입니다.");
			history.back();
		}else if("${userDto.group_type}" == ""){
			$("#login-dialog").modal("show");
		}
		
		if($("#business-email").data("original") != ""){
			$("#business-email").parent().removeClass("has-error").addClass("has-success");
    		$("#business-email-message").empty();
    		check1 = true;
		}
		checkValidate("business-name");
		checkValidate("business-website");
		
		$("#business-category").change(function(){
			if($(this).val() != "none"){
				$("#business-category").parent().removeClass("has-error");
				$("#business-category-message").html("");
			}
		});
		
		$('#login-dialog').on('hidden.bs.modal', function(){
  	  		history.back();
  		});
	});
</script>
</body>
</html>